<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-11 11:20:41
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-07 18:25:30
 * @FilePath: \hbzc-groupmeal-restaurant-web\src\Public-UIlibrary\pb-tree\index.vue
-->
<template>
  <el-scrollbar>
    <el-tree style="margin-right: 15px" :data="treeData" :props="defaultProps" :highlight-current="true"
      :default-expand-all="expandAll" :current-node-key="currentKey" :expand-on-click-node="false"
      @node-click="handleNodeClick"></el-tree>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits } from "vue";
import { useDebounceFn, useThrottleFn } from "@vueuse/core";

/**
 * @param highlight 选中节点是否高亮  默认true
 * @param expandAll 是否展开所有节点  默认true
 * @param treeData 树节点数据
 * @param currentKey 默认选中的节点标识
 * @param defaultProps 自定义展示字段名称
 */
const props = withDefaults(
  defineProps<{
    highlight?: boolean;
    expandAll?: boolean;
    currentKey?: string | number;
    treeData: Tree[];
    defaultProps?: object;
  }>(),
  {
    currentKey: '',
    highlight: true,
    expandAll: true,
    treeData: [],
    defaultProps: {
      children: "children",
      label: "label",
    },
  }
);


const emits = defineEmits<{
  (e: "nodeClick", data: object): void;
}>();

interface Tree {
  label: string;
  children?: Tree[];
}

/**
 * 点击节点触发，返回当前节点和父节点
 *
 * useThrottleFn 添加防抖
 */
const handleNodeClick = useDebounceFn((curNode: Tree, b) => {
  let {
    parent: { data: parentNode },
  } = b;
  emits("nodeClick", { curNode, parentNode });
}, 300);
</script>

<style lang="scss" scope>
// tree内容高度
.el-tree-node__content {
  height: 36px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.65);
}

// treeicon样式
.el-tree-node__expand-icon {
  color: rgba(0, 0, 0, 0.85);
  padding: 0;
}

// tree悬停背景
.el-tree-node__content:hover {
  background: rgba(0, 0, 0, 0.06);
}

// 鼠标点击时节点的背景颜色
.el-tree-node:focus>.el-tree-node__content {
  background: rgba(0, 0, 0, 0.15);
}

// treelable文字样式
.el-tree-node__label {
  margin-left: 8px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

// tree选中项样式
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: var(--pb-color-primary-light-1);
  color: var(--pb-color-primary) !important;
}

.el-tree-node__content>.el-tree-node__expand-icon {
  padding: 0;
}
</style>